<template>
  <div class="order-wrapper">
    <div class="content">
      <div class="top">
        <div class="title-wrapper">
          <div class="title">B2B订单</div>
        </div>
        <el-button @click="exportExcle">导出excle</el-button>
      </div>
      <div class="operation">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="交易完成" name="first" />
          <el-tab-pane label="待完成" name="second" />
          <el-tab-pane label="交易关闭" name="third" />
        </el-tabs>
      </div>
      <div class="middle">
        <Input ref="searchInput" placeholder="请输入业务员姓名/手机号" class="input-cls" @search="handleSearch" />
        <el-date-picker
          v-model="value"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          @change="handleChange"
        />
      </div>
      <div class="bottom">
        <table-list :list="list" @success="handleDeleteSuccess" />
      </div>
    </div>
    <pagination class="pagination" :total="total" :page-size="pageSize" :cur-page="curPage" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import Input from '@/common/input'
import Pagination from '@/common/pagination'
import TableList from './tableList'
import { getOrderList } from '@/api/order'
const ERR_OK = 200
export default {
  components: {
    Input,
    TableList,
    Pagination
  },
  data() {
    return {
      activeName: 'first',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value: [],
      list: [],
      page: 1,
      total: 0,
      pageSize: 5,
      curPage: 0

    }
  },
  created() {
    this._getOrderList({ page: this.page, status: 1 })
  },
  methods: {
    handleDeleteSuccess() {
      this.switchStatus()
    },
    switchStatus(start_time, end_time) {
      switch (this.activeName) {
        case 'first':
          this._getOrderList({ page: this.page, condition: this.query, status: 1, start_time, end_time })
          break
        case 'second':
          this._getOrderList({ page: this.page, condition: this.query, status: 0, start_time, end_time })
          break
        case 'third':
          this._getOrderList({ page: this.page, condition: this.query, status: -1, start_time, end_time })
          break
      }
    },
    handleTabClick() {
      this.switchStatus()
    },
    exportExcle() {
      window.location.href = 'https://fengbao.zhixiu.vip/order/export'
    },
    handleSearch(query) {
      this.query = query
      this.page = 1
      this.curPage = this.page
      this.value = []
      this._getOrderList({ page: this.page, condition: this.query })
    },
    handleNextPage(page) {
      this.page = page
      this.curPage = page
      this.switchStatus()
    },
    handleChange(time) {
      console.log(time)
      this.page = 1
      this.curPage = 1
      if (time) {
        // this._getOrderList({ page: this.page, condition: this.query, start_time: time[0], end_time: time[1] })
        this.switchStatus(time[0], time[1])
      } else {
        // this._getOrderList({ page: this.page, condition: this.query })
        this.switchStatus()
      }
    },
    _getOrderList({ page, condition, start_time, end_time, status }) {
      getOrderList({ page, condition, start_time, end_time, status })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = this.formatData(res.data.data)
            this.total = res.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 处理数据
    formatData(list) {
      const arr = []
      list.forEach((item, index) => {
        for (let i = 0; i <= 1; i++) {
          arr.push(item)
        }
      })
      return arr
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-pagination.scss";
.el-button {
  background: #409eff;
  color: #fff;
}
.order-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  min-height: 115vh;
  .content {
    .top {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      .title-wrapper {
        display: flex;
        align-content: center;
        .title {
          height: 44px;
          line-height: 44px;
          color: rgba(68, 68, 68, 1);
          font-size: 18px;
          font-family: Roboto;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
    .middle {
      display: flex;
      align-items: center;
      .totle {
        line-height: 26px;
        color: rgba(245, 108, 108, 1);
        font-size: 18px;
        text-align: left;
        font-family: Roboto;
        margin-right: 9px;
        font-weight: bold;
      }
      .input-cls {
        margin-right: 21px;
      }
    }
    .bottom {
      margin-top: 16px;
    }
  }
}
.el-tabs /deep/ .el-tabs__item {
  line-height: 26px;
  color: rgba(51, 51, 51, 1);
  font-size: 18px;
  text-align: center;
  font-family: Roboto;
  font-weight: bold;
}
.el-tabs /deep/.el-tabs__active-bar {
  height: 3px !important;
}
</style>
